<template>
	<view>
		<view class="top">
			<image class="ubcg" src="/static/ubcg.png" mode=""></image>
			<view class="uads">
				<view class="user flex" @click.stop="$pageGo('/pages/user/setuserinfo')">
					<image class="uimg" :src="userInfo.headImg?userInfo.headImg:'/static/avater.png'" mode=""></image>
					<view class="u_r ">
						<view class="uname">
							{{userInfo.nickName}}
						</view>
						<view class="phone flex" @click.stop="">
							手机号：
							<text v-if="userInfo.phone">{{userInfo.phone}}</text>
							<button v-else open-type="getPhoneNumber" @getphonenumber.stop="getphonenumber">
								点击授权
							</button>
						</view>
					</view>
				</view>
				<view class="jp">
					<image v-if="userInfo.level == '铜牌'" src="/static/j1.png" mode=""></image>
					<image v-if="userInfo.level == '银牌'" src="/static/j2.png" mode=""></image>
					<image v-if="userInfo.level == '金牌'" src="/static/j3.png" mode=""></image>
					<!-- <view class="abstext">
						abs
					</view> -->
				</view>
			</view>
		</view>
		<view class="order">
			<view class="flex_jc_sb">
				<view class="t1">
					我的订单
				</view>
				<view class="t2" @click="$pageGo('/pages/user/order?orderStatus=')">
					全部 <uni-icons size="12" type="right" color="#BFBFBF"></uni-icons>
				</view>
			</view>
			<view class="list">
				<view class="items" v-for="(item,index) in data.orderList" :key="index"
				 @click="$pageGo(`/pages/user/order?orderStatus=${item.name}`)">
					<uni-badge :text="num" absolute v-show="index==0">
				     	<image :src="item.icon" mode=""></image>
					</uni-badge>
					<image :src="item.icon" mode="" v-show="index!=0"></image>
					<view class="">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>

		<view class="ulist">
			<view class="items flex" v-for="(item,index) in data.ulist" :key="index"
			@click="pagego(item,index)">
				<image :src="item.icon" mode=""></image>
				<view class="right flex_jc_sb">
					<view class="">
						{{item.name}}
					</view>
					<uni-icons type="right" color="#BFBFBF"></uni-icons>
				</view>
				<button v-if="index==2" class="btnads" open-type="contact"></button>
			</view>
		</view>
		<view class="" style="height: 66rpx;">

		</view>
		<uv-tabbar :value="3" class="tab">
		</uv-tabbar>
	</view>
</template>

<script setup>
	import {
		reactive, ref
	} from 'vue'
	import {onShow } from '@dcloudio/uni-app'
	import {
	getUserInfo,setPhone,notpay
	} from '@/common/http.api.js'
	import o1 from '@/static/o1.png'
	import o2 from '@/static/o2.png'
	import o3 from '@/static/o3.png'
	import o4 from '@/static/o4.png'
	import o5 from '@/static/o5.png'
	import u1 from '@/static/u1.png'
	import u2 from '@/static/u2.png'
	import u3 from '@/static/u3.png'
	import u4 from '@/static/u4.png'
	import u5 from '@/static/u5.png'
	import u6 from '@/static/u6.png'
	import u7 from '@/static/u7.png'
	import u8 from '@/static/u8.png'

	const data = reactive({
		orderList: [{
				name: '待支付',
				icon: o1
			},
			{
				name: '待备货',
				icon: o2
			},
			{
				name: '备货中',
				icon: o3
			},
			{
				name: '已送达',
				icon: o4
			},
			{
				name: '已完成',
				icon: o5
			}
		],
		ulist: [{
				name: '月结账单',
				icon: u1,
				path: '/pages/user/monthorder'
			},
			{
				name: '收货地址',  
				icon: u2,
				path: '/pages/user/address'
			},
			{
				name: '客服',
				icon: u3,
				path: '/pages/user/about?id=1'
			},
			{
				name: '联系我们',
				icon: u8,
				path: '/pages/user/about?id=1'
			},
			{
				name: '关于我们',
				icon: u4,
				path: '/pages/user/about?id=2'
			},
			{
				name: '用户协议',
				icon: u5,
				path: '/pages/user/about?id=3'
			},
			{
				name: '隐私政策',
				icon: u6,
				path: '/pages/user/about?id=4'
			}
		]
	})
	const userInfo = ref({})
	const num = ref(1)
	onShow(()=>{
		notpay({}).then(res=>{
			num.value = res.data
		})
		getUserInfo({}).then(res=>{
			if(res.code == 200){
				userInfo.value = res.data
			}
		})
	})
	// function gogogo(){
	// 	uni.navigateToMiniProgram({
	// 	  appId: 'wx0cbbb3be32ee7e55',
	// 	  path: '/mainPage/meeting',
	// 	  success(res) {
	// 	    // 打开成功
	// 	  }
	// 	})
	// }
	// 授权手机号
	function getphonenumber(e){
		console.log(e);
		setPhone({
			code: e.detail.code
		}).then(res => {
			if (res.code == 200) {
				getUserInfo({}).then(res=>{
					if(res.code == 200){
						userInfo.value = res.data
						uni.setStorageSync('userInfo', res.data)
					}
				})
			}
		})
	}
	
	function pagego(item,index){
		if(index == 2){
			return
		}
		// console.log(item,index);
		uni.navigateTo({
			url:item.path
		})
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.top {
		width: 100%;
		height: 456rpx;
		position: relative;

		.ubcg {
			width: 100%;
			height: 456rpx;
		}

		.uads {
			width: 100%;
			height: 456rpx;
			position: absolute;
			top: 0%;
			padding: 20rpx;
			box-sizing: border-box;

			.user {
				margin-top: 190rpx;

				.uimg {
					width: 140rpx;
					height: 140rpx;
					border: 4rpx solid #FFFFFF;
					border-radius: 70rpx;
				}

				.u_r {
					margin-left: 20rpx;
					.uname {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #000000;
					}
					.phone {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #AEAEAE;
						margin-top: 20rpx;
						text {
							color: #FF7700;
						}
					}
					button{
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FF7700;
						display: inline-block;
						padding: 0%;
						height: 40rpx;
						line-height: 40rpx;
					}
					button::after{
						border: none;
					}
				}
			}

			.jp {
				width: 710rpx;
				height: 140rpx;
				margin-top: 15rpx;
				image {
					width: 710rpx;
					height: 140rpx;
				}
				.abstext {}
			}
		}
	}

	.order {
		width: 710rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 60rpx auto 20rpx;
		padding: 24rpx 20rpx 34rpx 30rpx;
		box-sizing: border-box;

		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #979797;
		}

		.list {
			display: flex;
			justify-content: space-between;
			margin-top: 34rpx;

			.items {
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				image {
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 10rpx;
				}
			}

		}
	}

	.ulist {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0rpx auto;
		padding: 40rpx 20rpx 1rpx 30rpx;
		box-sizing: border-box;
		.btnads{
			width: 660rpx;
			position: absolute;
			height: 80rpx;
			opacity: 0;
		}
		.items {
			border-bottom: 1px solid #efefef;
			padding-bottom: 35rpx;
			margin-bottom: 35rpx;
			
			image {
				width: 52rpx;
				height: 52rpx;
			}

			.right {
				margin-left: 20rpx;
				flex: 1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}
		}

		.items:last-child {
			border: none;
			margin-bottom: 0rpx;
		}
	}
</style>